<template>
    <div class="table store sever_list">
        <div class="crumbs store_title">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>异常统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-date-picker
                    v-model="findStartTimeValue"
                    @change="dataSelectFn"
                    :picker-options="pickerOptAll"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-button type="primary" class="handle-btn" @click="searchData">查询</el-button>
                <el-button type="primary" class="handle-btn" @click="resolveData" :loading="lockButon">处理</el-button>
            </div>
            <el-table :data="list"  border style="width: 100%">
                <el-table-column prop="promoteSet.city" label="区域" width="120px">
                </el-table-column>
                <el-table-column prop="promoteSet.landPageName" label="落地页" >
                </el-table-column>
                <el-table-column prop="orderTime" label="订单时间" >
                </el-table-column>
                <el-table-column prop="resultDesc" label="异常信息" width="550px">
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination v-if="paginationShow"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, sizes, prev, pager, next"
                    :total="pageNum"
                    :page-sizes="[10, 30, 50]"
                    :page-size="pageSize"
                    :current-page.sync="cur_page"
                    :current-page="cur_page">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        storeAsGet,
        storeAsPost,
        storeAsPut
    } from '../api/api';
    import {formatDate} from '../tool/tool';
    import {base64,tool_confirm} from '../tool/tool'
    export default {
        data() {
            return {

                //列表数据
                list:[],
                startTime: '2015-05-22 14:16:40',
                endTime: '2038-12-16 14:16:40',
                //分页
                pageNum: null,
                cur_page: 0,
                pageSize: 10,
                // 查询的id
                spreadId: '',
                findStartTimeValue: '',
                paginationShow: true,
                lockButon: false,
            }
        },
        created() {
            this.getSpreadList(this.cur_page);
        },
        computed: {
        },
        methods: {
            //数据列表
            getSpreadList(curPage){
                let filters =  {
                    formatDate(time) {
                        let date = new Date(time);
                        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
                    }
                };
                storeAsGet(
                    '/promote/wishBill/page/wishBillStatus/error?page='
                    +curPage+'&size='
                    +this.pageSize+'&startTime='
                    +this.startTime+'&endTime='
                    +this.endTime
                ).then(res => {
                    // console.log(res,"86")
                    // 赋值
                    // this.cur_page = res.data.content.page.number;
                    this.pageNum = res.data.content.page.totalElements;
                    this.list = res.data.content.page.content;
                    Array.prototype.slice.call(this.list).forEach((value,index)=>{
                        value.orderTime = filters.formatDate(value.orderTime);
                    });
                }).catch(errors=>{
                    this.$message.error(errors.response.data.detail)
                });
            },
            //日期
            dataSelectFn(data){
                if(!data){
                    this.startTime = '2015-05-22 14:16:40';
                    this.endTime = '2038-12-16 14:16:40';
                    this.getSpreadList(0);
                }else{
                    this.startTime = formatDate(data[0], 'yyyy-MM-dd hh:mm:ss');
                    this.endTime = formatDate(data[1], 'yyyy-MM-dd hh:mm:ss');
                    console.log(this.startTime,this.endTime,"data")
                }

            },
            searchData(){
                this.paginationShow = false;
                // this.cur_page = this.cur_page-1;
                this.handleCurrentChange(1)
                this.$nextTick(function () {
                    this.paginationShow = true;
                })

            },
            resolveData(){
                let self = this
                this.formData ={
                    startTime:this.startTime,
                    endTime:this.endTime
                };
                this.lockButon = true
                storeAsPost(
                    this.formData,
                    '/promote/wishBill/wishBillStatus/error?startTime='
                    +this.startTime+'&endTime='
                    +this.endTime
                ).then(res=>{
                    // console.log(res,'添加')
                    this.getSpreadList(this.cur_page);
                    setTimeout(()=> {
                        self.lockButon = false
                    }, 2000)
                    // this.reservation = false;
                    this.$message.success(`重跑成功`);
                }).catch(errors=>{
                    this.$message.error(errors.response.data.detail)
                    setTimeout(()=> {
                        self.lockButon = false
                    }, 2000)
                });
            },
            //查看详情
            bandFn(e,val) {
                // console.log(e,val)
                this.$router.push({
                    path:'/spread',
                    query: {
                        province: val.province, city: val.city
                    }
                });
            },
            changeError(){
                this.$router.push("/spread");
            },
            // 分页导航
            handleCurrentChange(val) {
                // console.log(val,this.cur_page,"before")
                this.cur_page = val;
                // console.log(val,this.cur_page,"after")
                this.getSpreadList(val-1)
            },
            handleSizeChange(val) {
                this.pageSize = val;
                let filters =  {
                    formatDate(time) {
                        let date = new Date(time);
                        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
                    }
                };
                storeAsGet(
                    '/promote/wishBill/page/wishBillStatus/error?page='
                    +0+'&size='
                    +val+'&startTime='
                    +this.startTime+'&endTime='
                    +this.endTime
                ).then(res => {
                    // console.log(res,"86")
                    // 赋值
                    this.cur_page = res.data.content.page.number;
                    this.pageNum = res.data.content.page.totalElements;
                    this.list = res.data.content.page.content;
                    Array.prototype.slice.call(this.list).forEach((value,index)=>{
                        value.orderTime = filters.formatDate(value.orderTime);
                    });
                }).catch(errors=>{
                    this.$message.error(errors.response.data.detail)
                });
                // console.log(`每页 ${val} 条`);
            },
        }
    }
</script>

<style scoped>
    .store{
        position: relative;
    }
    .store .store_title{
        height: 40px;
    }
    .store .store_title div{
        line-height: 40px;
    }
    .ex_parent > div{
        padding:0px 10px 10px 0px;
    }
    .handle-box {
        margin-bottom: 20px;
    }
    .handle-btn{
        margin-left: 10px;
    }
</style>
